<template>
  <div class="form-container">
    <div class="login-box">
      <div class="login-title"><span>登录迷你微商城</span></div>
      <form>
        <div class="form-group">
          <input
              type="email"
              class="form-input"
              v-model="formData.email"
              placeholder="请输入邮箱或手机号"
              autocomplete="off"
          >
        </div>
        <div class="form-group password-group">
          <input
              :type="showPassword ? 'text' : 'password'"
              class="form-input"
              v-model="formData.password"
              placeholder="密码为6-18个非空白字符"
              autocomplete="off"
          />
          <button
              type="button"
              class="toggle-password"
              @click="togglePasswordVisibility"
          >
            {{ showPassword ? '隐藏' : '显示' }}
          </button>
        </div>
        <div class="form-group">
          <button type="button" class="action-btn" @click="login">登录</button>
        </div>
        <div class="form-footer">
          <span style="color: #adadad;">没有帐号</span>
          <a href="javascript:void(0)" @click="$emit('show-modal', 2)">免费注册</a>
          <a href="javascript:void(0)" @click="$emit('show-modal', 3)">忘记密码</a>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive} from 'vue';
import {ElMessage} from 'element-plus';
import apis from '@/config/api-config.js';
import getResponse from '@/assets/js/http-client.js';
import {validateEmail, validatePassword} from '@/assets/js/form-data-validate.js';
const emit = defineEmits(['show-modal']);
// 登录表单数据
const formData = reactive({
  email: '',
  password: ''
});

const showPassword = ref(false)


const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value
}

const login = async () => {
  const {email, password} = formData;
  if (!email) {
    ElMessage.warning('请输入邮箱!');
    return;
  }
  if (!validateEmail(email)) {
    ElMessage.warning('请输入正确的邮箱格式!');
    return;
  }
  if (!password) {
    ElMessage.warning('请输入密码!');
    return;
  }
  if (!validatePassword(password)) {
    ElMessage.warning('请输入正确的密码格式!');
    return;
  }
  //调用登录接口
  let url = apis.member.login.url;
  let type = apis.member.login.type
  const result = await getResponse(url, type, {email, password});
  if (200 !== result.code) {
    ElMessage.warning(result.message);
    return;
  }
  ElMessage.success('登录成功!');
  //登录成功后，将用户信息保存到localStorage
  localStorage.setItem('wemall-token', result.data);
  //登录成功后，关闭登录弹界面
  emit('show-modal',0);
}
</script>

<style scoped>

/* 登录框样式 */
.form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  padding: 20px;
}

.login-box {
  width: 100%;
  max-width: 400px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.login-title {
  padding: 20px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
}

form {
  padding: 25px;
}

.form-group {
  margin-bottom: 20px;
  position: relative;
}

.form-input {
  width: 100%;
  height: 40px;
  min-width: 360px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-input:focus {
  outline: none;
  border-color: #007BFF;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.password-group {
  position: relative;
}

.toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  padding: 5px;
}

.action-btn {
  width: 100%;
  padding: 12px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
}

.action-btn:hover {
  background-color: #0056b3;
}

.form-footer {
  text-align: center;
  margin-top: 15px;
  font-size: 14px;
}

.form-footer a {
  color: #007BFF;
  text-decoration: none;
  margin: 0 5px;
}

.form-footer a:hover {
  text-decoration: underline;
}
</style>